<template>
    <div class="income">
        <div class="income__header">
            <x-header v-show="!isWeChar" class="income__header">
                <div slot="default" class="income__header--title income__header--title">消息通知</div>
                <div @click="goBack" slot="overwrite-left" class="income__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
                <div class="income__header--rightfont income__header--title" slot="right">账单明细</div>
            </x-header>
            <div class="vux-masker-box income__masker">
                <div class="vux-masker" style="background-color: rgba(0, 0, 0, 0.5);">
                    <div class="m-title income__masker--title">
                        <div class="income__masker--alert">账户余额(元)</div>
                        <div class="income__masker--number">31280.00</div>
                        <div>
                            <x-button class="income__masker--button" mini>兑换</x-button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <cell style="background:#FFF">
            <span class="income__balance--title" slot="after-title">我的宝豆(个)</span>
            <span class="income__balance--number" slot="inline-desc">300</span>
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/income.png">
            <div class="badge-value" slot>
                <span class="vertical-middle income__list--button">兑换></span>
            </div>
        </cell>

        <group>
            <cell>
                <span class="income__list--title" slot="after-title">首次推荐好友</span>
                <span class="income__list--number" slot="inline-desc">+300宝币</span>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/income.png">
                <div class="badge-value" slot>
                    <span class="vertical-middle income__list--button">去达成></span>
                </div>
            </cell>
            <cell>
                <span class="income__list--title" slot="after-title">首次出单</span>
                <span class="income__list--number" slot="inline-desc">+1000宝币</span>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/income.png">
                <div class="badge-value" slot>
                    <span class="vertical-middle income__list--button">去达成></span>
                </div>
            </cell>
            <cell>
                <span class="income__list--title" slot="after-title">每日首次出单</span>
                <span class="income__list--number" slot="inline-desc">+200宝币</span>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/income.png">
                <div class="badge-value" slot>
                    <span class="vertical-middle income__list--button">去达成></span>
                </div>
            </cell>
            <cell>
                <span class="income__list--title" slot="after-title">每日首次车险出单</span>
                <span class="income__list--number" slot="inline-desc">+200宝币</span>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/income.png">
                <div class="badge-value" slot>
                    <span class="vertical-middle income__list--button">去达成</span>
                </div>
            </cell>
        </group>
        <div class="common__footer common__color-FFF common__margin-bottom">查看全部任务</div>
    </div>
</template>
<script>
import { XHeader, XButton, Masker, Cell, CellBox, CellFormPreview, Group, Badge, GroupTitle } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
    components: { GroupTitle, XHeader, Masker, Group, Cell, CellFormPreview, CellBox, Badge, XButton },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "消息通知";
        this.$init.subPageInit(this);
    },
}
</script>



<style lang="scss">
.income__balance--title {
  font-size: 14px;
}

.income__list--number {
  font-size: 12px;
}

.income__list--title {
  font-size: 14px;
}

.income__list--button {
  padding: 2px 10px 4px 10px;
  font-size: 12px;
  border: 1px solid #C8161D;
  border-radius: 2px;
  color: #C8161D;
}

.income__balance--number {
  font-size: 15px;
  color: #C8161D;
}

.income__header--title {
  color: #fff !important;
}

.income__masker--button {
  font-size: 12px !important;
  padding: 2px 32px !important;
  border: 1px solid #fff !important;
  background-color: #1a4e8a !important;
  color: #fff !important;
}

.income__masker--title {
  top: 0 !important;
  margin-top: 25% !important;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.income__masker--number {
  margin-bottom: 2%;
  font-size: 47px;
}

.income__masker--alert {
  margin-bottom: 2%;
  font-size: 13px;
}

.income__masker {
  border-radius: 2px;
  height: 210px;
}

.income__header {
  background: darkgray;
  background-image: url(https://static.vux.li/demo/1.jpg);
}

.income__header {
  background-color: transparent !important;
}

.vux-masker {
  background-color: transparent !important;
}

.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}
</style>





